<template>
  <div class="overview-container">
    <svg width="100%" height="100%" 
      xmlns="http://www.w3.org/2000/svg"
      preserveAspectRatio="none meet"
      viewBox="0 0 1240 1225"
    >
      <image width="100%" height="100%" xlink:href="@/assets/image/archives.jpg"></image>

      <path class="floor" d="M373,1075
      L 838 1106
      L 1040 1100
      L 1041 1150
      L 838 1176
      L 373 1125
      z" 
      :fill = "trans.transparency00"
      @mouseover="mouseoverHandler('负一层','00',$event)"
      @mouseleave="mouseleaverHandler('00')"
      @click="clickHandler"></path>

      <path class="floor" d="M373,1043
      L 838 1033
      L 1040 1055
      L 1041 1100
      L 838 1106
      L 373 1075
      z" 
      :fill = "trans.transparency01"
      @mouseover="mouseoverHandler('一层','01',$event)"
      @mouseleave="mouseleaverHandler('01')"
      @click="clickHandler"></path>

      <path class="floor" d="M373,1013
      L 838 978
      L 1040 1020
      L 1041 1055
      L 838 1033
      L 373 1043
      z" 
      :fill = "trans.transparency02"
      @mouseover="mouseoverHandler('二层','02',$event)"
      @mouseleave="mouseleaverHandler('02')"
      @click="clickHandler"></path>

      <path class="floor" d="M373,980
      L 838 926
      L 1039 989
      L 1039 1020
      L 838 978
      L 373,1013
      z" 
      :fill = "trans.transparency03"
      @mouseover="mouseoverHandler('三层','03',$event)"
      @mouseleave="mouseleaverHandler('03')"
      @click="clickHandler('floor03')"></path>

      <path class="floor" d="M373,953
      L 838 874
      L 1039 963
      L 1039 989
      L 838 926
      L 373,980
      z" 
      :fill = "trans.transparency04"
      @mouseover="mouseoverHandler('四层','04',$event)"
      @mouseleave="mouseleaverHandler('04')"
      @click="clickHandler"></path>

      <path class="floor" d="M373,920
      L 838 822
      L 1039 938
      L 1039 963
      L 838 874
      L 373,953
      z" 
      :fill = "trans.transparency05"
      @mouseover="mouseoverHandler('五层','05',$event)"
      @mouseleave="mouseleaverHandler('05')"
      @click="clickHandler"></path>

      <path class="floor" d="M373,891
      L 838 770
      L 1039 912
      L 1039 938
      L 838 822
      L 373,920
      z" 
      :fill = "trans.transparency06"
      @mouseover="mouseoverHandler('六层','06',$event)"
      @mouseleave="mouseleaverHandler('06')"
      @click="clickHandler"></path>

      <path class="floor" d="M373,859
      L 838 720
      L 1040 889
      L 1040 912
      L 838 770
      L 373,891
      z" 
      :fill = "trans.transparency07"
      @mouseover="mouseoverHandler('七层','07',$event)"
      @mouseleave="mouseleaverHandler('07')"
      @click="clickHandler('floor07')"></path>

      <path class="floor" d="M373,829
      L 838 670
      L 1040 863
      L 1040 889
      L 838 720
      L 373,859
      z" 
      :fill = "trans.transparency08"
      @mouseover="mouseoverHandler('八层','08',$event)"
      @mouseleave="mouseleaverHandler('08')"
      @click="clickHandler"></path>

      <path class="floor" d="M373,800
      L 838 623
      L 1040 838
      L 1040 863
      L 838 670
      L 373,829
      z" 
      :fill = "trans.transparency09"
      @mouseover="mouseoverHandler('九层','09',$event)"
      @mouseleave="mouseleaverHandler('09')"
      @click="clickHandler"></path>

      <path class="floor" d="M373,775
      L 838 576
      L 1040 816
      L 1040 838
      L 838 623
      L 373,800
      z" 
      :fill = "trans.transparency10"
      @mouseover="mouseoverHandler('十层','10',$event)"
      @mouseleave="mouseleaverHandler('10')"
      @click="clickHandler"></path>

      <path class="floor" d="M373,746
      L 838 529
      L 1040 796
      L 1040 816
      L 838 576
      L 373,775
      z" 
      :fill = "trans.transparency11"
      @mouseover="mouseoverHandler('十一层','11',$event)"
      @mouseleave="mouseleaverHandler('11')"
      @click="clickHandler"></path>

      <path class="floor" d="M373,715
      L 838 480
      L 1040 770
      L 1040 796
      L 838 529
      L 373,749
      z" 
      :fill = "trans.transparency12"
      @mouseover="mouseoverHandler('十二层','12',$event)"
      @mouseleave="mouseleaverHandler('12')"
      @click="clickHandler"></path>

      <path class="floor" d="M373,688
      L 838 427
      L 1040 740
      L 1040 770
      L 838 480
      L 373,715
      z" 
      :fill = "trans.transparency13"
      @mouseover="mouseoverHandler('十三层','13',$event)"
      @mouseleave="mouseleaverHandler('13')"
      @click="clickHandler"></path>

      <path class="floor" d="M373,658
      L 838 390
      L 926 535
      L 920 555
      L 838 430
      L 373,688
      z" 
      :fill = "trans.transparency14"
      @mouseover="mouseoverHandler('十四层','14',$event)"
      @mouseleave="mouseleaverHandler('14')"
      @click="clickHandler"></path>

      <path class="floor" d="M373,628
      L 838 340
      L 926 493
      L 926 535
      L 838 390
      L 373,658
      z" 
      :fill = "trans.transparency15"
      @mouseover="mouseoverHandler('十五层','15',$event)"
      @mouseleave="mouseleaverHandler('15')"
      @click="clickHandler"></path>

      <path class="floor" d="M373,598
      L 838 285
      L 926 450
      L 926 493
      L 838 340
      L 373,628
      z" 
      :fill = "trans.transparency16"
      @mouseover="mouseoverHandler('十六层','16',$event)"
      @mouseleave="mouseleaverHandler('16')"
      @click="clickHandler"></path>

     <path class="floor" d="M373,536
      L 838 183
      L 926 372
      L 926 450
      L 838 285
      L 373,598
      z" 
      :fill = "trans.transparency17"
      @mouseover="mouseoverHandler('屋顶','17',$event)"
      @mouseleave="mouseleaverHandler('17')"
      @click="clickHandler"></path>

    </svg>
    <div class="msg-box" v-show="msgBox.showMsg" :style="{bottom:msgBox.bottom+'px',left:msgBox.left+'px'}">
      当前楼层:{{msgBox.msg}}
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  data () {
    return {
      container: undefined,
      trans: {
        transparency00: "rgba(58,82,250,0.0)",
        transparency01: "rgba(58,82,250,0.0)",
        transparency02: "rgba(58,82,250,0.0)",
        transparency03: "rgba(58,82,250,0.0)",
        transparency04: "rgba(58,82,250,0.0)",
        transparency05: "rgba(58,82,250,0.0)",
        transparency06: "rgba(58,82,250,0.0)",
        transparency07: "rgba(58,82,250,0.0)",
        transparency08: "rgba(58,82,250,0.0)",
        transparency09: "rgba(58,82,250,0.0)",
        transparency10: "rgba(58,82,250,0.0)",
        transparency11: "rgba(58,82,250,0.0)",
        transparency12: "rgba(58,82,250,0.0)",
        transparency13: "rgba(58,82,250,0.0)",
        transparency14: "rgba(58,82,250,0.0)",
        transparency15: "rgba(58,82,250,0.0)",
        transparency16: "rgba(58,82,250,0.0)",
        transparency17: "rgba(58,82,250,0.0)",
      },
      msgBox: {
        showMsg: false,
        msg: '',
        bottom:0,
        left:0
      }
    };
  },
  computed: {
    myFill(){
      return rgba(58,82,250,this.transparency)
    }
  },
  methods: {
    mouseleaverHandler(f){
      this.trans['transparency'+f] = "rgba(58,82,250,0)"
      this.msgBox.showMsg = false
    },
    mouseoverHandler(info,f,e){
      console.log(this['transparency'+f])
      this.trans['transparency'+f] = "rgba(58,82,250,0.4)"
      this.msgBox.showMsg = true
      this.msgBox.msg = info
    },
    clickHandler(floor){
      this.$router.push('/visualization/smart-build/'+floor)
    }
  }
}
</script>

<style lang="scss" scoped>
.overview-container {
  position: absolute;
  width: 100%;
  height: 100%;
}
.msg-box {
  position: absolute;
  background-color: #ffffff;
  border: solid 1px black;
  font-size: 10px;
  padding: 1px;
}
</style>